function createpage(current_page, size, total, pages) {
    var ul = document.getElementById('pagination')
    //清空分页
    ul.innerHTML = ''
    //上一页
    var li = document.createElement('li')
    li.className = "page-item"

    if (current_page == 1) {
        li.innerHTML =
            '<a class="page-link" onclick="prePage()" style="pointer-events: none;"><span class="iconfont">&#xe600;</span></a>'
    } else {
        li.style = "cursor: pointer"
        li.innerHTML = '<a class="page-link" onclick="prePage()"><span class="iconfont">&#xe600;</span></a>'
    }
    ul.appendChild(li)

    if (pages <= 8) {
        for (var i = 1; i <= pages; i++) {
            var li = document.createElement('li')

            if (i == current_page) {
                li.className = "page-item active"
            } else {
                li.className = "page-item"
            }
            li.style = "cursor: pointer"
            var content = '<a class="page-link" onclick="handlePage(' + i + ')">' + i + '</a>'
            li.innerHTML = content
            ul.appendChild(li)
        }
    } else {
        // 1-5页的动态变化
        if (current_page <= 5) {
            for (var i = 1; i <= (current_page + 3 < 8 ? current_page + 3 : 7); i++) {
                var li = document.createElement('li')
                if (i == current_page) {
                    li.className = "page-item active"
                } else {
                    li.className = "page-item"
                }
                li.style = "cursor: pointer"
                var content = '<a class="page-link" onclick="handlePage(' + i + ')">' + i + '</a>'
                li.innerHTML = content
                ul.appendChild(li)
            }
            //省略
            var li = document.createElement('li')
            li.className = "page-item"
            li.style = "cursor: pointer"
            var content = '<a class="page-link">···</a>'
            li.innerHTML = content
            ul.appendChild(li)
            //最后一页
            var li = document.createElement('li')
            li.className = "page-item"
            li.style = "cursor: pointer"
            var content = '<a class="page-link" onclick="handlePage(' + pages + ')">' + pages + '</a>'
            li.innerHTML = content
            ul.appendChild(li)

        }

        if (current_page > 5 && current_page <= pages - 4) {
            //第一页
            var li = document.createElement('li')
            li.className = "page-item"
            li.style = "cursor: pointer"
            var content = '<a class="page-link" onclick="handlePage(' + 1 + ')">' + 1 + '</a>'
            li.innerHTML = content
            ul.appendChild(li)
            //省略
            var li = document.createElement('li')
            li.className = "page-item"
            li.style = "cursor: pointer"
            var content = '<a class="page-link">···</a>'
            li.innerHTML = content
            ul.appendChild(li)

            //当前页周围
            for (var i = current_page - 3; i <= current_page + 3; i++) {
                var li = document.createElement('li')
                if (i == current_page) {
                    li.className = "page-item active"
                } else {
                    li.className = "page-item"
                }
                li.style = "cursor: pointer"
                var content = '<a class="page-link" onclick="handlePage(' + i + ')">' + i + '</a>'
                li.innerHTML = content
                ul.appendChild(li)
            }

            //省略
            var li = document.createElement('li')
            li.className = "page-item"
            li.style = "cursor: pointer"
            var content = '<a class="page-link">···</a>'
            li.innerHTML = content
            ul.appendChild(li)
            //最后一页
            var li = document.createElement('li')
            li.className = "page-item"
            li.style = "cursor: pointer"
            var content = '<a class="page-link" onclick="handlePage(' + pages + ')">' + pages + '</a>'
            li.innerHTML = content
            ul.appendChild(li)

        }


        //最后5页的动态变化
        if (current_page > pages - 4 && current_page <= pages) {
            //第一页
            var li = document.createElement('li')
            li.className = "page-item"
            li.style = "cursor: pointer"
            var content = '<a class="page-link" onclick="handlePage(' + 1 + ')">' + 1 + '</a>'
            li.innerHTML = content
            ul.appendChild(li)

            //省略
            var li = document.createElement('li')
            li.className = "page-item"
            li.style = "cursor: pointer"
            var content = '<a class="page-link">···</a>'
            li.innerHTML = content
            ul.appendChild(li)

            for (var i = current_page - 3; i <= pages; i++) {
                var li = document.createElement('li')
                if (i == current_page) {
                    li.className = "page-item active"
                } else {
                    li.className = "page-item"
                }
                li.style = "cursor: pointer"
                var content = '<a class="page-link" onclick="handlePage(' + i + ')">' + i + '</a>'
                li.innerHTML = content
                ul.appendChild(li)
            }

        }

    }

    //下一页
    var li = document.createElement('li')
    li.className = "page-item"

    if (current_page == pages) {
        li.innerHTML =
            '<a class="page-link" onclick="nextPage()" style="pointer-events: none;"><span class="iconfont">&#xe601;</span></a>'
    } else {
        li.style = "cursor: pointer"
        li.innerHTML = '<a class="page-link" onclick="nextPage()"><span class="iconfont">&#xe601;</span></a>'
    }
    ul.appendChild(li)
    // console.log(ul)

    //选择每页条数
    let label = document.createElement('label')
    label.innerHTML = '每页条数：\n' +
        '<select name="type" onchange="changePageSize(this.value)">' +
        '<option value="20">20条</option>' +
        '<option value="50">50条</option>' +
        '<option value="100">100条</option>' +
        '</select>'
    label.style = "margin-left:50px;margin-top:6px";
    let select = label.firstElementChild;
    switch (size){
        case 20:
            select.children[0].selected=true;
            break;
        case 50:
            select.children[1].selected=true;
            break;
        case 100:
            select.children[2].selected=true;
            break;
        default:
            break;
    }
    ul.appendChild(label)

    var span = document.createElement('span')
    span.innerText = "共 " + total + " 条"
    span.style = "margin-left:50px;margin-top:6px"
    ul.appendChild(span)
}

// let current_page = 1; //当前页
// let total; //总条数
// let size = 10; //一页大小
// let pages; //总页数

// //上一页
// async function prePage() {

// }
// //下一页
// async function nextPage() {

// }
// //点击页码切换
// async function handlePage(page) {

// }